<script setup lang="ts">
import { reactive, ref } from 'vue'
import { notify, Tooltip } from '@/widgets'
const colors = reactive([
  'primary',
  'success',
  'info',
  'warning',
  'danger',
  'white',
  'link',
  'light',
  'dark',
  'black',
  'text'
])

const disabled = ref(false)

const sizes = reactive(['small', 'normal', 'medium', 'large'])

const msg = (title: string, content: string) => notify.info({ title, content, duration: 5000 })
</script>
<template>
  <div class="btn-example pane-block">
    <div>
      <label class="checkbox">
        <input type="checkbox" v-model="disabled" />
        Disabled
      </label>
    </div>
    <div class="btn-example-main">
      <div class="btn-example-block">
        <div>Color</div>
        <Tooltip placement="right" :content="'button'">
          <button class="button" @click="msg('color', 'button')" :disabled="disabled">
            no color
          </button>
        </Tooltip>
        <Tooltip
          placement="right"
          v-for="c in colors"
          :key="`color-${c}`"
          :theme="c"
          :content="`button is-${c}`"
        >
          <button
            :class="`button is-${c}`"
            @click="msg('color', `button is-${c}`)"
            :disabled="disabled"
          >
            {{ c }}
          </button>
        </Tooltip>
      </div>
      <div class="btn-example-block">
        <div>Size</div>
        <Tooltip
          placement="right"
          v-for="s in sizes"
          :key="`size-${s}`"
          :content="`button is-${s}`"
        >
          <button
            :class="`button is-${s}`"
            @click="msg('size', `button is-${s}`)"
            :disabled="disabled"
          >
            {{ s }}
          </button>
        </Tooltip>
      </div>
      <div class="btn-example-block">
        <div>Outlined</div>
        <Tooltip placement="right" content="button is-outlined">
          <button
            class="button is-outlined"
            @click="msg('outlined', 'button is-outlined')"
            :disabled="disabled"
          >
            no color
          </button>
        </Tooltip>
        <Tooltip
          placement="right"
          v-for="c in colors"
          :key="`outlined-${c}`"
          :theme="c"
          :content="`button is-outlined is-${c}`"
        >
          <button
            :class="`button is-outlined is-${c}`"
            @click="msg('outlined', `button is-outlined is-${c}`)"
            :disabled="disabled"
          >
            {{ c }}
          </button>
        </Tooltip>
      </div>
      <div class="btn-example-block">
        <div>Light</div>
        <Tooltip placement="right" content="button is-light">
          <button
            class="button is-light"
            @click="msg('outlined', 'button is-light')"
            :disabled="disabled"
          >
            no color
          </button>
        </Tooltip>
        <Tooltip
          placement="right"
          v-for="c in colors"
          :key="`light-${c}`"
          :theme="c"
          :content="`button is-light is-${c}`"
        >
          <button
            :class="`button is-light is-${c}`"
            @click="msg('light', `button is-outlined is-${c}`)"
            :disabled="disabled"
          >
            {{ c }}
          </button>
        </Tooltip>
      </div>
      <div class="btn-example-block" style="width: 13em">
        <div>Icon button [color]</div>
        <Tooltip placement="right" content="icon-button mas-icon-model">
          <button
            class="icon-button mas-icon-model"
            @click="msg('icon button [color]', 'icon-button mas-icon-model')"
            :disabled="disabled"
          />
        </Tooltip>
        <Tooltip
          placement="right"
          v-for="c in colors"
          :key="`i-color-${c}`"
          :theme="c"
          :content="`icon-button mas-icon-model is-${c}`"
        >
          <button
            :class="`icon-button is-${c} mas-icon-model`"
            @click="msg('icon button [color]', `icon-button is-${c} mas-icon-model`)"
            :disabled="disabled"
          />
        </Tooltip>
      </div>
      <div class="btn-example-block" style="width: 10em">
        <div>Icon button [size]</div>
        <Tooltip
          placement="right"
          v-for="s in sizes"
          :key="`i-size-${s}`"
          :content="`icon-button mas-icon-model is-${s}`"
        >
          <button
            :class="`icon-button is-${s} mas-icon-model`"
            @click="msg('icon button [size]', `icon-button is-${s} mas-icon-model`)"
            :disabled="disabled"
          />
        </Tooltip>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';

.btn-example {
  .btn-example-main {
    border-top: 1px solid $border;
    display: flex;
    flex-direction: row;
  }
  .btn-example-block {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    &:not(:first-child) {
      border-left: 1px solid $border;
    }
    > div {
      font-weight: 600;
    }
    button {
      margin-top: 1em;
    }
  }
}
</style>
